<template>
  <div class="slider-demo-block">
    <el-slider
      v-model="data.active"
      :step="1"
      :format-tooltip="tooltipchange"
      :marks="props.timelineData"
      :max="23"
      :disabled="props.isabled"
      @change="changeSlider"
    />
  </div>
</template>



<script setup>
import { computed, defineProps, reactive, ref, watch, defineEmits } from "vue";
const emit = defineEmits(["callBack"]);
const props = defineProps({
  timelineData: Array,
  activeYear: String,
  isabled: Boolean,
});
let data = reactive({
  active: "",
});
watch(
  () => props.activeYear,
  (newval, oldval) => {
    data.active = newval;
  },
  {
    immediate: true, // 启用首次监听
  }
);
const changeSlider = (val) => {
  //这里拿到滑动到哪一天
  //   console.log(val);
  //   console.log(getDaysArr[val]);
  //   return getDaysArr[val];
  // console.log(val);
  emit("callBack", val);
  let a = "";
  for (const [key, value] of Object.entries(props.timelineData)) {
    if (key == val) {
      a = value;
    }
  }
  if (a == "早晨") {
    a = "07:00";
  } else if (a == "中午") {
    a = "12:00";
  } else if (a == "傍晚") {
    a = "17:00";
  } else if (a == "夜间") {
    a = "22:00";
  }
  let obj = {
    time: a,
  };
  // console.log(obj);
  window.ue4("time", obj);
};
function tooltipchange(val) {
  let a = "";
  for (const [key, value] of Object.entries(props.timelineData)) {
    if (key == val) {
      a = value;
      if (a == "早晨") {
        a = "07:00";
      } else if (a == "中午") {
        a = "12:00";
      } else if (a == "傍晚") {
        a = "17:00";
      } else if (a == "夜间") {
        a = "22:00";
      }
    }
  }
  return a;
}
</script>

<style lang="scss" scoped>
::v-deep {
  .slider-demo-block {
    display: flex;
    align-items: center;
  }
  .slider-demo-block .el-slider {
    width: 100%;
    margin-top: 0;
    margin-left: 12px;
  }
  //   .slider-demo-block .demonstration {
  //     font-size: 14px;
  //     color: var(--el-text-color-secondary);
  //     line-height: 44px;
  //     flex: 1;
  //     overflow: hidden;
  //     text-overflow: ellipsis;
  //     white-space: nowrap;
  //     margin-bottom: 0;
  //   }
  //   .slider-demo-block .demonstration + .el-slider {
  //     flex: 0 0 70%;
  //   }
  .el-slider__bar {
    background-color: #00000000 !important;
  }
  .el-slider__runway {
    background-color: #c0e7fa !important;
    height: 4px;
  }
  .el-slider__button {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: none;
    background: #f7a41b;
    transform: translateX(25%);
  }
  .el-slider__stop {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #c0e7fa;
    transform: translateY(-20%);
  }
  .el-slider__stop:nth-child(5n + 1),
  .el-slider__stop:nth-child(5n + 2),
  .el-slider__stop:nth-child(5n + 3),
  .el-slider__stop:nth-child(5n + 4) {
    display: none;
  }
  .el-slider__marks-text {
    color: #ffffff;
    transform: translateX(-35%);
  }
  .el-slider__marks-text:nth-child(5n + 1),
  .el-slider__marks-text:nth-child(5n + 2),
  .el-slider__marks-text:nth-child(5n + 3),
  .el-slider__marks-text:nth-child(5n + 4) {
    display: none;
  }
  //   .el-slider__button-wrapper {
  //     position: absolute;
  //     top: -15px;
  //   }
}
</style>